// * 我已提供了相关的素材图片，请完成相关的html页面布局部分
  // * 果树从种子到成熟共分5级，每级所需的浇水量逐步增长
  // * 每次浇水提示给用户到下一级剩余的百分比，升级后显示新图片
  // * 用class思想完成
  // * 完成以上用户交互操作，和界面的功能
  // * 如果已经达到最高级，则显示结束，并不能继续浇水
  // * 如果能力可以胜任，请添加浇水的动画效果

  // 果树
export default class Tree {
  // 溢出的经验值
  static EXPS = [100, 150, 210, 280, 390, 500]
  #level = 1
  #exp = 0

  plant = null
  pot = null
  water = null
  title = null

  constructor(plant, pot, water, title) {
    this.plant = plant
    this.pot = pot
    this.water = water
    this.title = title

    this.pot.addEventListener(
      'click', () => this.handleClick())
    this.pot.querySelector('img')
      .addEventListener(
      'animationend', ()=> {
        this.handleAnimationEnd()
      }
    )
  }
  handleClick() {
    // this.watering(60)
    this.pot.classList.add('demo-pot-animation')
  }
  handleAnimationEnd() {
    this.water.style.visibility = 'visible'
    setTimeout(() => {
      this.watering(60)
      this.pot.classList.remove('demo-pot-animation')
      this.water.style.visibility = 'hidden'
      this.render()
    }, 1000)
  }
  render() {
    this.plant.querySelector('img').src =
      `./images/plant-${this.#level-1}.png`
    this.title.innerText = this.toString()
  }

  watering(amount) {
    // 如果level到达Tree.EXPS.length，不能再浇水了
    if(this.#level < Tree.EXPS.length) {
      const exp = this.#exp + amount
      const max = Tree.EXPS[this.#level-1]
      if(exp >= max) {
        this.#level += 1
        this.#exp = 0
      } else {
        this.#exp = exp
      }
    } else {
      console.log('已经到达最大值，不能再浇水了')
    }
  }
  get percent() {
    return (1-this.#exp/Tree.EXPS[this.#level-1]) * 100
  }
  toString() {
    return `你的果树当前是第${this.#level}级，还差${
      this.percent
    }%`
  }
}